<!DOCTYPE html>
<html>
<head>
<title>Nuclear Energy Level Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  canvas {
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="nuclear-diagram" width="550" height="350"></canvas>
<script>
const canvas = document.getElementById('nuclear-diagram');
const ctx = canvas.getContext('2d');

// Style settings
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.font = '24px "Times New Roman"';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom'; 

// Bounding box
ctx.strokeRect(50, 40, 450, 220);

// Energy levels (dashed lines)
const y_up = 100;
const y_low = 200;
ctx.setLineDash([8, 6]);
ctx.beginPath();
ctx.moveTo(100, y_up);
ctx.lineTo(480, y_up);
ctx.moveTo(100, y_low);
ctx.lineTo(480, y_low);
ctx.stroke();
ctx.setLineDash([]); // Reset to solid lines

// Text labels
const x_E = 170;
const x_JP = 400;

// Energy column
ctx.fillText('0.37 MeV', x_E, y_up - 2);
ctx.fillText('0 MeV', x_E, y_low - 2);
ctx.fillText('E', x_E, y_low + 45);

// Spin-Parity column
// Using Unicode for superscript minus: \u207B
ctx.fillText('5/2\u207B', x_JP, y_up - 2);
ctx.fillText('7/2\u207B', x_JP, y_low - 2);

// For J^P, draw J and P separately
ctx.font = '24px "Times New Roman"';
ctx.fillText('J', x_JP - 8, y_low + 45);
ctx.font = '18px "Times New Roman"';
ctx.fillText('P', x_JP + 7, y_low + 39);

// Reset font for caption
ctx.font = '24px "Times New Roman"';

// Transition arrow
const x_arrow = 285;
ctx.beginPath();
ctx.moveTo(x_arrow, y_up);
ctx.lineTo(x_arrow, y_low);
ctx.stroke();

// Arrowhead (filled triangle)
ctx.beginPath();
ctx.moveTo(x_arrow, y_low);
ctx.lineTo(x_arrow - 8, y_low - 12);
ctx.lineTo(x_arrow + 8, y_low - 12);
ctx.closePath();
ctx.fill();

// Figure caption
ctx.fillText('Fig. 2.14', 275, 320);

</script>
</body>
</html>